<template>
    <div class="nw-m-wrap">
        <div class="nw-m-header">
            <img class="nw-mtop-bg" :src="staticImageUrl('images/home/nw_mTop_bg.png')" alt="">
            <img class="nw-m-phone" :src="staticImageUrl('images/home/nw_m_phone.png')" alt="">
            <img class="nw-m-phone1" :src="staticImageUrl('images/home/nw_m_phone1.png')" alt="">
        </div>
        <div class="nw-m-section">
            <div class="positionR">
                <div class="nw-m-wcenter">
                    <div class="nw-m-center"></div>
                </div>
            </div>
            <div class="nw-m-article">
                <img class="nw-m-bottom-bg" :src="staticImageUrl('images/home/nw_mBottom_bg.png')"  alt="">
                <img class="nw-m-down-text" :src="staticImageUrl('images/home/nw_m_down_text.png')" alt="">
                <div>
                    <!--<div class="nw-m-down-wbtn">-->
                    <!--&lt;!&ndash;<div class="positionR">&ndash;&gt;-->
                    <!--&lt;!&ndash;<img class="nw-m-down-btn" src="static/images/nw_m_down_btn.png" alt="">&ndash;&gt;-->
                    <!--&lt;!&ndash;<span class="nw-m-down-btext">下载体验</span>&ndash;&gt;-->
                    <!--&lt;!&ndash;</div>&ndash;&gt;-->
                    <!--</div>-->
                    <div class="nw-m-down-btn1" @click="toHaoKanHaoWan()">
                        下载体验
                        <img class="nw-m-down-icon" :src="staticImageUrl('images/home/nw_m_down_icon.png')" alt="">
                    </div>
                    <img class="nw-m-down-text" :src="staticImageUrl('images/home/nw_m_down_text.png')" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "mIndex",
        mounted(){
            $('.nw-m-phone1').animate({top: "0"},2000,"swing",function () {
                $('.nw-m-phone').animate({top: "0"},2000,"swing");
            });
        },
    }
</script>

<style scoped>
    html,body,.nw-m-wrap{
        height: 100%;
        width: 100%;
        overflow: hidden;
        background-color: #fff;
    }
    .nw-m-header{
        padding-top: .2rem ;
        width: 3.75rem;
        background: #F5F5F5;
        position: relative;
    }
    .nw-mtop-bg{
        width: 100%;
    }
    .nw-m-phone,.nw-m-phone1{
        position: absolute;
        bottom: 0;
        top: 300px;
        left: 0;
        right: 0;
        margin: auto;
    }
    .nw-m-phone{
        width: 130px;
        max-width: 35%;
        z-index: 2;
        left: -80px;
    }
    .nw-m-phone1{
        z-index: 1;
        width: 110px;
        max-width: 30%;
        left: 80px;
    }
    .nw-m-article{
        width: 3.2rem;
        position: relative;
        margin-left: .275rem;
    }
    .nw-m-bottom-bg{
        width: 100%;
    }
    .nw-m-down-text{
        position: absolute;
        width: 3.14rem;
        left: .03rem;
        right: 0;
        top: .85rem;
        margin: auto;
        max-width: 330px;
    }
    .nw-m-down-wbtn{
        width: 1.84rem;
        height: .74rem;
        position: absolute;
        top: 1.74rem;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
        color: #fff;
        line-height: .74rem;
    }
    .nw-m-down-btn{
        width: 100%;
    }
    .nw-m-down-btext{
        position: absolute;
        left: 0;
        right: 0;
        top: .1rem;
        z-index: 1;
    }
    .nw-m-down-btn1{
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 55%;
        width: 1.6rem;
        height: .5rem;
        max-width: 180px;
        max-height: 60px;
        line-height: .5rem;
        text-align: center;
        color: #fff;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
        background-color: #8BA9E8;
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
        -webkit-box-shadow: 0 0.1rem 0.1rem #BACBF1;
        -moz-box-shadow: 0 .1rem .1rem #BACBF1;
        box-shadow: 0 0.03rem 0.1rem #BACBF1;
    }
    .nw-m-wcenter{
        position: absolute;
        left: 0;
        top: -.03rem;
        width: 100%;
        height: .2rem;
        background-color: #f5f5f5;
    }
    .nw-m-center{
        position: relative;
        height: .4rem;
        border-radius: 50%;
        background-color: #fff;
    }
    .nw-m-down-icon{
        width: .21rem;
        height: .21rem;
        margin-left: .1rem;
    }
    .nw-m-section{
        position: relative;
        z-index: 2;
        background: #fff;
    }
</style>